<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Crunchy :: Images</title>
	<meta title="template ../index.html">
</head>

<body>
<div id="main_title">Images and dhtml</div>
<div id="content">
<h3 >Dynamically inserting images into a page</h3>
<p>Crunchy allow a user to insert one or more images interactively below
an interpreter or any other elements.  The technique used to do this kind of
web page transformation is known as <i>dynamic html</i> or <i>dhtml</i> for short.
You need to import the <code>dhtml.py</code> module to do this within
Crunchy.
</p>
<pre title="interpreter">
import dhtml
dhtml.image("../images/crunchy-python-powered.png", width=457, height=83)
</pre
<p>
The above image has been loaded from a location given relative to the current
html file being displayed, always assumed to be from the basic server.
To load other images, you will need to specify the absolute path.  Since
I do not know the path of interesting images on your computer,
I'll give you another one to try.
</p>
<pre title="interpreter">
dhtml.image("http://imgs.xkcd.com/comics/python.png")
</pre>
<p>
By default, Crunchy displays images with a width and height of 400 pixels each.
As you have seen in the first example, you can specify other parameters for
the image.
</p>
<p>Crunchy can also work with modules that generate images
to display them dynamically within the browser.  To
help you with locating images, Crunchy defines two
locations on your computer: your home directory and the Crunchy temporary
directory.

The following example assumes that
<a href="http://matplotlib.sourceforge.net/" title="external_link">matplotlib</a>
is installed; if it's not, you're out of luck!</p>
<pre title="editor">
import dhtml
image_file = dhtml.join_path(crunchy.temp_dir, "foo.png")

# assumes matplotlib is installed
import matplotlib.numerix as nx
import pylab

def boltzman(x, xmid, tau):
    """
    evaluate the boltzman function with midpoint
    xmid and time constant tau over x
    """
    return 1. / (1. + nx.exp(-(x-xmid)/tau))

def fill_below_intersection(x, S, Z):
    """
    fill the region below the intersection of S and Z
    """
    #find the intersection point
    ind = nx.nonzero( nx.absolute(S-Z)==min(nx.absolute(S-Z)))[0]
    # compute a new curve which we will fill below
    Y = nx.zeros(S.shape, typecode=nx.Float)
    Y[:ind] = S[:ind]  # Y is S up to the intersection
    Y[ind:] = Z[ind:]  # and Z beyond it
    pylab.fill(x, Y, facecolor='blue', alpha=0.5)

x = nx.arange(-6, 6, .01)
S = boltzman(x, 0, 1)
Z = 1-boltzman(x, 0.5, 1)
pylab.plot(x, S, x, Z, color='red', lw=2)
fill_below_intersection(x, S, Z)

pylab.savefig(image_file)
dhtml.image(image_file)
</pre>
<div class="notes">
<h4>Suggestions?</h4>
<p> If you have some suggestions for libraries other than matplotlib that generate
images and could be showcased by Crunchy, let us know.
</p>
</div>

<h3 >Advanced dhtml</h3>
<p>In addition to images, other html elements can be added and removed
dynamically.  The following example shows how simple animations can
be added to a page.</p>
<pre title="editor">
# comprehensive example

import dhtml
import time

delay = 0.5
long_delay = 2

def countdown(message):
    dhtml.append("span", label="message", attributes={'innerHTML':message})
    time.sleep(delay)
    dhtml.append("span", label="message", attributes={'innerHTML':message+" ."})
    time.sleep(delay)
    dhtml.append("span", label="message", attributes={'innerHTML':message+" .."})
    time.sleep(delay)
    dhtml.append("span", label="message", attributes={'innerHTML':message+" ...."})
    time.sleep(long_delay)

def generic(file_path, position):
    return dhtml.image(file_path, width=32, height=32,
                      label="b_%s"%position, parent_label=position)

# We use images that are part of the Crunchy distribution.
def yellow(position):
    return generic("../images/warning_big.png", position)

def green(position):
    return generic("../images/ok_big.png", position)

def red(position):
    return generic("../images/display_big.png", position)

dhtml.append("br") # start on a new line

countdown("Inserting a table with one row")
dhtml.append("table", label="table")
dhtml.append("tr", label="row1", parent_label="table")
dhtml.append("td", label="1_1", parent_label="row1")
dhtml.append("td", label="1_2", parent_label="row1")
dhtml.append("td", label="1_3", parent_label="row1")
red("1_1")
red("1_2")
red("1_3")

countdown("Changing first element")
green("1_1")
countdown("Changing second element")
green("1_2")
countdown("Changing third element")
green("1_3")

countdown("Adding a second row")
dhtml.append("tr", label="row2", parent_label="table")
dhtml.append("td", label="2_1", parent_label="row2")
dhtml.append("td", label="2_2", parent_label="row2")
dhtml.append("td", label="2_3", parent_label="row2")
red("2_1")
red("2_2")
red("2_3")

countdown("Adding a third row")
dhtml.append("tr", label="row3", parent_label="table")
dhtml.append("td", label="3_1", parent_label="row3")
dhtml.append("td", label="3_2", parent_label="row3")
dhtml.append("td", label="3_3", parent_label="row3")
yellow("3_1")
yellow("3_2")
yellow("3_3")

countdown("Removing the second row")
dhtml.remove("row2")

# notice how elements are only appended...
countdown("Appending a new row")
dhtml.append("tr", label="row2", parent_label="table")
dhtml.append("td", label="2_1", parent_label="row2")
dhtml.append("td", label="2_2", parent_label="row2")
dhtml.append("td", label="2_3", parent_label="row2")
red("2_1")
red("2_2")
red("2_3")

dhtml.append("span", label="message", attributes={'innerHTML':"Done!"})
</pre>

</div>

</body>
</html>
